{{ partial "header.html" . }}

<div id="loadingMask" style="width: 100%; height: 100%; position: fixed; background: #fff;"></div>
<script>
function fadeOut(el) {
  el.style.opacity = 1;

  var last = +new Date();
  var tick = function() {
    el.style.opacity = +el.style.opacity - (new Date() - last) / 80;
    last = +new Date();
    // console.log(el.style.opacity);

    if (el.style.opacity > 0) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    } else {
      el.style.display='none';
    }
  };

  tick();
}

function ready(fn) {
    if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
         el = document.getElementById('loadingMask');
         fadeOut(el);
        var elements = document.querySelectorAll("img");
        Array.prototype.forEach.call(elements, function(el, i) {
            if (el.getAttribute("alt")) {
                const caption = document.createElement('figcaption');
                var node = document.createTextNode(el.getAttribute("alt"));
                caption.appendChild(node);
                const wrapper = document.createElement('figure');
                wrapper.className = 'image';
                el.parentNode.insertBefore(wrapper, el);
                el.parentNode.removeChild(el);
                wrapper.appendChild(el);
                wrapper.appendChild(caption);
            }
        });

    } else {
        document.addEventListener('DOMContentLoaded', fn);
    }
}
window.onload = ready;
</script>

<div class="content">
  <article class="h-entry">
      <h1 class="p-name">{{ .Title }} <aside>{ {{ range .Params.tags }}<a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}/">{{ . }}</a>{{end}} } ·
	   {{ if lt 1 .WordCount }}{{ .WordCount }} words{{ else }}{{ .WordCount }} word{{ end }} · {{ .ReadingTime }} minute read</aside></h1>

  <div style="margin-left: 10px; display: inline-block">
  {{ if .Params.guest }}
      {{ if .Params.author }}
      <i>Guest contribution by <u><a href="{{ .Site.BaseURL }}author/{{ urlize .Params.author }}">{{ .Params.author }} </a></u></i>
      {{ end }}

      {{ $baseURL := .Site.BaseURL}} <!-- because of annoying scoping -->
      <!-- When co-writing -->
      {{ if .Params.authors }}
      {{ $n_authors := len .Params.authors }}
      Co-written by 
        {{ range $i, $author := .Params.authors }}
            <u><a href="{{ $baseURL }}author/{{ urlize $author }}">{{ $author }}</a></u></i>
            {{ if ne $i (sub $n_authors 1) }}&{{ end }}
        {{ end }}
      {{ end }}

  {{ end }}
  <br><br>
  </div>
  {{ if .Params.toc }}
	<div id="toc">
		{{ .TableOfContents }}
	</div>
  {{ end }}

  <div class="e-content">

  {{ if .Params.series }}
      <div>
      <i>
      This post is part of the 
        {{ range .Params.series }}
        <a href="/series/{{ . | urlize }}" style='text-decoration: underline;'>{{ . }}</a> 
        {{ end  }}
      series.
      </i>
      <br><br>
      </div>
  {{ end }}

  {{ .Content }}
  </div>
  </article>
  </div> <!-- end of content -->

  <hr>

  <div>
  <aside>
      <i class="fa fa-home" style="font-size:24px"></i>
      <a class="u-url" href="{{ .Permalink }}">Published <time class="dt-published">{{ .Params.date.Format "2 January, 2006" }}</time> by <a rel="author" class="p-author h-card" href="{{ .Site.BaseURL }}author/{{urlize .Params.author}} ">{{ .Params.author }}</a>
  </a></aside>
  <aside> 
      <i class="fas fa-tools" style="font-size:24px"></i> Last modified on {{ .Lastmod.Format "2 January, 2006"}}.
  </aside>
  </div>
  <br>


  {{ partial "link_posts.html" . }}

</div>



<!-- {{ if (eq .Type "posts") }}
  <p><small><em>Written on {{ .Date.Format "January 2, 2006"}} </em></small></p>
{{ end }} -->

{{ partial "webmentions.html" . }}

{{ partial "post-comments" . }}

{{ partial "contribute-post" . }}

{{ partial "footer.html" . }}
